<template>
	<view class="commodity_save_box">
		<u-form :model="commodityForm" style="width: 90%;margin: 0 auto" :rules="commodityRules" ref="commodityForm">
			<u-form-item label="商品名称" :label-width='formItemWidth' prop="commodityName">
				<u-input
					v-model="commodityForm.commodityName" 
					placeholder="请输入商品名称"
				/>
			</u-form-item>
			<u-form-item label="售出价格(人民币)" :label-width='formItemWidth' prop="price">
				<u-input
					type="number"
					v-model="commodityForm.price" 
					placeholder="请输入价格"
				/>
			</u-form-item>
			<u-form-item label="之前价格(人民币)" :label-width='formItemWidth' prop="priced">
				<u-input 
					type="number"
					v-model="commodityForm.priced" :min="0"
					placeholder="请输入价格"
				/>
			</u-form-item>
			<u-form-item label="总量" :label-width='formItemWidth' prop="sum">
				<u-number-box :min="0" v-model="commodityForm.sum"></u-number-box>
			</u-form-item>
			<u-form-item label="包装费(人民币)" :label-width='formItemWidth' prop="packPrice">
				<u-input 
					type="number"
					v-model="commodityForm.packPrice" 
					placeholder="请输入价格"
				/>
			</u-form-item>
			<u-form-item label="荤素" :label-width='formItemWidth' prop="meatOrVegetable">
				<u-radio-group v-model="commodityForm.meatOrVegetable">
					<u-radio
						:customStyle="{marginRight: '16px'}"
						v-for="(item, index) in meatOrVegetableList"
						:key="index"
						:label="item.name"
						:name="item.id"
					>
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="口味" :label-width='formItemWidth' prop="flavorRemark">
				<u-input 
					v-model="commodityForm.flavorRemark" 
					placeholder="请输入口味"
				/>
			</u-form-item>
			<u-form-item label="冷热" :label-width='formItemWidth' prop="coolHot">
				<u-radio-group v-model="commodityForm.coolHot">
					<u-radio
						:customStyle="{marginRight: '16px'}"
						v-for="(item, index) in coolHotList"
						:key="index"
						:label="item.name"
						:name="item.id"
					>
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="原料" :label-width='formItemWidth' prop="rawMaterial">
				<u-input 
					v-model="commodityForm.rawMaterial" 
					placeholder="请输入原料"
				/>
			</u-form-item>
			<u-form-item label="商品图片" :label-width='formItemWidth'>
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<view class="u-page__upload-item">
						<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="1"
						></u-upload>
						</view>
					</view>
					<text>可在线选择或者自行上传，开店后可随时修改（大小不超过500K)</text>
				</view>
			</u-form-item>
			<u-form-item label="商品克重(g)" :label-width='formItemWidth' prop="weight">
				<u-input 
					type="number"
					v-model="commodityForm.weight"
					placeholder="请输入商品重量"
				/>
			</u-form-item>
			<u-form-item label="分类菜单" :label-width='formItemWidth' prop="typeId" @click="typePickerShow = true">
				<u--input
					v-model="typeJoint"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择所分配的菜单"
					border="none"
					@click=""
				></u--input>
				<u-icon
					slot="right"
					name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item label="出餐时间(分钟)" :label-width='formItemWidth' prop="mealTime">
				<u-input 
					type="number"
					v-model="commodityForm.mealTime" 
					placeholder="请输入大约出餐时间"
				/>
			</u-form-item>
			<u-form-item label="描述" :label-width='formItemWidth' prop="remark">
				<u--textarea
					placeholder="不低于3个字"
					v-model="commodityForm.remark"
					count
				></u--textarea>
			</u-form-item>
			<u-form-item label="上架" :label-width='formItemWidth' prop="state">
				<u-radio-group v-model="commodityForm.state">
					<u-radio
						:customStyle="{marginRight: '16px'}"
						v-for="(item, index) in stateList"
						:key="index"
						:label="item.name"
						:name="item.id"
					>
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<u-button @click="saveCommodity()" style="background-color: #0BAFF5;color: white;width: 70%;">提交</u-button>
		<u-picker
		:show="typePickerShow" 
		:columns="commodityTypeList"
		@confirm="typeConfirm"
		keyName="typeName"></u-picker>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// u-form-item宽度
				formItemWidth: '90',
				// 菜单选择器 状态
				typePickerShow: false,
				// 存放 商品图片
				fileList1: [],
				// 上架 0上架 1未上架
				stateList: [
					{
						id: '0',
						name: '上架'
					},
					{
						id: '1',
						name: '未上架'
					}
				],
				// 冷热 0凉 1热
				coolHotList: [
					{
						id: '0',
						name: '凉',
					},
					{
						id: '1',
						name: '热'
					}
				],
				// 荤素 0荤 1素
				meatOrVegetableList: [
					{
						id: '0',
						name: '荤',
					},
					{
						id: '1',
						name: '素'
					}
				],
				// 商品对象
				commodityForm: {
					// 商品名称
					commodityName: '',
					// 价格
					price: '',
					// 总数量
					sum: '',
					// 总销售量
					amount: '',
					// 描述
					remark: '',
					// 原价
					priced: '',
					// 包装费
					packPrice: '',
					// 荤素
					meatOrVegetable: '',
					// 口味
					flavorRemark: '',
					// 冷热
					coolHot: '',
					// 原料
					rawMaterial: '',
					// 重量（g)
					weight: '',
					// 出餐时间(分钟)
					mealTime: ''
				},
				commodityRules: {
					commodityName: [
						{
							required: true,
							message: '请输入商品名称',
							trigger: ['blur'],
						},
						{
							max: 20,
							message: '商品名称长度不得超过20',
							trigger: ['blur'],
						}
					],
					price: [
						{
							required: true,
							message: '请输入售出价格',
							trigger: ['blur'],
						},
					],
					priced: [
						{
							required: true,
							message: '请输入以前价格',
							trigger: ['blur'],
						},
					],
					packPrice: [
						{
							required: true,
							message: '请输入包装费',
							trigger: ['blur'],
						},
					],
					meatOrVegetable: [
						{
							required: true,
							message: '请选择荤素',
							trigger: ['change'],
						},
					],
					// flavorRemark: [
					// 	{
					// 		required: true,
					// 		message: '请输入口味',
					// 		trigger: ['blur'],
					// 	},
					// ],
					coolHot: [
						{
							required: true,
							message: '请选择冷热',
							trigger: ['change'],
						},
					],
					rawMaterial: [
						{
							required: true,
							message: '请输入原料',
							trigger: ['blur'],
						},
					],
					typeId: [
						{
							type: 'number',
							required: true,
							message: '请选择商品分类菜单',
							trigger: ['change'],
						},
					],
					state: [
						{
							required: true,
							message: '请选择商品状态',
							trigger: ['change'],
						},
					],
					weight: [
						{
							type: 'number',
							required: true,
							message: '请输入商品的重量',
							trigger: ['blur'],
						},
					],
					mealTime: [
						{
							type: 'number',
							required: true,
							message: '请输入出餐时间',
							trigger: ['blur'],
						},
					],
				},
				// 存放商品分类 信息列表
				commodityTypeList: [],
				typeJoint: '',
			}
			
		},
		mounted () {
			// 初始化 根据店铺id获取当前 商品分类列表信息
			this.getCommodityTypeList()
		},
		methods: {
			// area选择器点击确认触发方法
			// 回调参数为包含columnIndex、value、values
			typeConfirm(e) {
				this.typeJoint = e.value[0].typeName
				this.commodityForm.typeId = e.value[0].id
				this.typePickerShow = false
			},
			// 根据店铺id获取当前 商品分类列表信息
			getCommodityTypeList () {
				this.$myRequest({
					url: '/eat-service/commodityType/getCommodityTypeList',
					data: {
						shopId: uni.getStorageSync('shopId')
					}
				}).then(res => {
					this.commodityTypeList.push(res.data.obj)
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 添加 商品
			saveCommodity () {
				this.$refs.commodityForm.validate().then(res => {
					if (res) {
						if (this.fileList1.length > 0) {
							uni.uploadFile({
								url: 'http://127.0.0.1:15000/eat-service/commodity/saveCommodity',
								filePath: this.fileList1[0].thumb,
								name: 'file',
								formData: {
									commodityName: this.commodityForm.commodityName,
									price: this.commodityForm.price,
									sum: this.commodityForm.sum,
									amount: this.commodityForm.amount,
									remark: this.commodityForm.remark,
									priced: this.commodityForm.priced,
									packPrice: this.commodityForm.packPrice,
									meatOrVegetable: this.commodityForm.meatOrVegetable,
									flavorRemark: this.commodityForm.flavorRemark,
									coolHot: this.commodityForm.coolHot,
									rawMaterial: this.commodityForm.rawMaterial,
									shopId: uni.getStorageSync('shopId'),
									userProtalId: uni.getStorageSync('id'),
									typeId: this.commodityForm.typeId,
									state: this.commodityForm.state,
									weight: this.commodityForm.weight,
									mealTime: this.commodityForm.mealTime
								},
								header: {
									'token': uni.getStorageSync('token')
								},
								success: (res) => {
									var data = JSON.parse(res.data)
									if (data.flag) {
										this.uNotify('添加成功', 'success')
										uni.redirectTo({
											url: '/pages/commodity/commodity-manage'
										})
									} else {
										this.uNotify('添加失败，请重试', 'warning')
									}
								}
							})
						} else {
							this.uNotify('请上传商品图片', 'warning')
						}
					}
				})
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style>
.u-alert-item{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.commodity_save_box{
	width: 100%;
	height: 800px;
	position: relative;
}
</style>
